<template>
    <div class="page">
        <!-- 头部导航 -->
        <div class="nav-header">
            <van-icon name="arrow-left" size="34" @click="goBack" />
            <div class="title">绑定手机号</div>
            <div></div>
        </div>

        <div class="bind-phone-content">
            <!-- 当前手机号 -->
            <div class="current-phone" v-if="currentPhone">
                <div class="section-title">当前绑定手机号</div>
                <div class="phone-display">{{ formatPhone(currentPhone) }}</div>
            </div>

            <!-- 绑定表单 -->
            <div class="bind-form">
                <div class="section-title">绑定新手机号</div>
                
                <div class="form-item">
                    <div class="item-label">手机号码</div>
                    <van-field
                        v-model="form.phone"
                        placeholder="请输入您的手机号码"
                        clearable
                        input-align="left"
                        :style="{ fontSize: '28px' }"
                        type="tel"
                        maxlength="11"
                    />
                </div>
                
                <div class="form-item">
                    <div class="item-label">短信验证码</div>
                    <div class="sms-field">
                        <van-field
                            v-model="form.smsCode"
                            placeholder="请输入验证码"
                            clearable
                            input-align="left"
                            :style="{ fontSize: '28px' }"
                            maxlength="6"
                        />
                        <van-button 
                            size="small" 
                            type="primary" 
                            class="sms-btn" 
                            @click="getSmsCode" 
                            :disabled="smsButtonDisabled || form.phone.length !== 11"
                            :style="{
                                background: form.phone.length === 11 ? '#FEE543' : '#FFF6B8',
                                color: '#333',
                                border: 'none'
                            }"
                        >{{ smsButtonText }}</van-button>
                    </div>
                </div>
                
                <div class="form-tips">
                    <p>* 手机号仅用于账号安全及服务通知，不会对外展示</p>
                    <p>* 更换手机号后，原手机号将无法接收验证码</p>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="submit-btn">
                <van-button 
                    type="primary" 
                    block 
                    @click="submitBind" 
                    :disabled="form.phone.length !== 11 || !form.smsCode"
                    :style="{
                        background: form.phone.length === 11 && form.smsCode ? '#FEE543' : '#FFF6B8',
                        color: '#333',
                        border: 'none'
                    }"
                >确认绑定</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Icon, Button, Field, Toast } from 'vant';

export default {
    name: 'BindPhonePage',
    components: {
        [Icon.name]: Icon,
        [Button.name]: Button,
        [Field.name]: Field
    },
    watch: {
        'form.phone': function(newVal) {
            // 自动格式化手机号，只允许输入数字
            this.form.phone = newVal.replace(/\D/g, '').substring(0, 11);
        }
    },
    data() {
        return {
            currentPhone: '',
            form: {
                phone: '',
                smsCode: ''
            },
            smsCodeTimer: null,
            smsButtonText: '获取验证码',
            smsButtonDisabled: false,
            countDown: 60
        };
    },
    created() {
        // 从本地存储获取当前手机号
        this.currentPhone = localStorage.getItem('userPhone') || '';
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        formatPhone(phone) {
            if (!phone || phone.length !== 11) return phone;
            return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
        },
        getSmsCode() {
            // 手机号码验证
            if (!this.form.phone || this.form.phone.length !== 11) {
                Toast('请输入正确的手机号码');
                return;
            }
            
            // 生成随机验证码
            const randomCode = this.generateRandomCode();
            
            // 直接填入验证码
            this.form.smsCode = randomCode;
            
            // 显示短暂提示
            Toast({
                message: '验证码已发送',
                icon: 'passed',
                className: 'custom-toast'
            });
            
            // 倒计时
            this.smsButtonDisabled = true;
            this.countDown = 60;
            this.smsButtonText = `${this.countDown}秒后重新获取`;
            
            this.smsCodeTimer = setInterval(() => {
                this.countDown--;
                this.smsButtonText = `${this.countDown}秒后重新获取`;
                
                if (this.countDown <= 0) {
                    clearInterval(this.smsCodeTimer);
                    this.smsButtonDisabled = false;
                    this.smsButtonText = '获取验证码';
                }
            }, 1000);
        },
        generateRandomCode() {
            return Math.floor(100000 + Math.random() * 900000).toString();
        },
        submitBind() {
            if (!this.form.phone) {
                Toast('请输入手机号码');
                return;
            }
            
            if (!this.form.smsCode) {
                Toast('请输入验证码');
                return;
            }
            
            if (this.form.phone.length !== 11) {
                Toast('请输入正确的手机号码');
                return;
            }
            
            // 保存手机号到本地存储
            localStorage.setItem('userPhone', this.form.phone);
            
            // 返回上一页
            this.$router.go(-1);
        }
    },
    beforeDestroy() {
        // 清除定时器
        if (this.smsCodeTimer) {
            clearInterval(this.smsCodeTimer);
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
    font-family: "正楷";
}

.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .title {
        font-size: 36px;
        font-weight: 500;
    }
}

.bind-phone-content {
    margin-top: 108px;
    padding: 0 32px;
}

.current-phone {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    
    .section-title {
        font-size: 30px;
        color: #333;
        margin-bottom: 24px;
    }
    
    .phone-display {
        font-size: 40px;
        font-weight: bold;
        color: #333;
        letter-spacing: 2px;
    }
}

.bind-form {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    
    .section-title {
        font-size: 30px;
        color: #333;
        margin-bottom: 32px;
    }
    
    .form-item {
        margin-bottom: 40px;

        .item-label {
            font-size: 32px;
            color: #333;
            margin-bottom: 20px;
        }

        .sms-field {
            display: flex;
            gap: 16px;

            .van-field {
                flex: 1;
            }

            .sms-btn {
                width: 160px;
                height: 72px;
                border-radius: 8px;
                font-size: 24px;
                background: linear-gradient(to right, #ff8200, #ff5000);
                border: none;
                box-shadow: 0 4px 8px rgba(255, 130, 0, 0.2);
            }
        }
    }
    
    .form-tips {
        font-size: 24px;
        color: #999;
        line-height: 1.6;
        margin-top: 32px;
    }
}

.submit-btn {
    padding: 0 32px;
    margin-bottom: 40px;

    .van-button {
        height: 88px;
        line-height: 88px;
        font-size: 32px;
        border-radius: 44px;
        box-shadow: 0 6px 12px rgba(255, 200, 0, 0.2);
        
        &:disabled {
            opacity: 1;
        }
    }
}

// 样式覆盖
:deep(.van-field__control) {
    height: 65px;
    line-height: 65px;
}

:deep(.van-cell) {
    padding: 10px 16px;
    border-radius: 12px;
    background-color: #f8f8f8;
    border: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 6px 0;
}
</style> 